<template>
  <div v-loading="isLoading > 0" class="page-container">
    <el-collapse>
      <el-collapse-item v-for="cate in cateList" :key="cate.id">
        <template slot="title">
          <h2>{{ cate.cate_name }}</h2>
        </template>

        <ul class="goods_box">
          <li v-for="goods in cate.goodsList" :key="goods.id" class="goods_item">
            <img class="goods_img" :src="goods.goods_image" alt />
            <p>{{ goods.goods_name }}</p>
            <el-switch
              :value="judgeGoods(goods.id)"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="changeGoodsStatus(goods.id)"
            />
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>

    <el-button type="primary" class="submit-btn" round @click="submit">提交</el-button>
  </div>
</template>

<script>
import { getGoodsCategoryList } from '@/api/goods_category'
import { getGoodsList } from '@/api/goods'
import { getShopList, updateOneShop } from '@/api/shop'
export default {
  name: 'ShopEditGoods',
  components: {},
  props: {},
  data() {
    return {
      isLoading: 0,
      cateList: [],
      shopGoodsList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.handleData()
  },
  mounted() {},
  methods: {
    submit() {
      updateOneShop({
        id: this.$route.query.shop_id,
        goods_list: this.shopGoodsList
      })
    },
    judgeGoods(goods_id) {
      return this.shopGoodsList.findIndex(item => item.id === goods_id) !== -1
    },
    changeGoodsStatus(goods_id) {
      const i = this.shopGoodsList.findIndex(item => item.id === goods_id)
      if (i === -1) {
        this.shopGoodsList.push({ id: goods_id })
      } else {
        this.shopGoodsList.splice(i, 1)
      }
      console.log(this.shopGoodsList)
      // const cate = this.shopGoodsList[cate_id]
      // if (cate) {
      //   const i = cate.indexOf(goods_id)
      //   if (i === -1) {
      //     cate.push(goods_id)
      //   } else {
      //     cate.splice(i, 1)
      //   }
      // } else {
      //   this.shopGoodsList[cate_id] = []
      //   this.shopGoodsList[cate_id].push(goods_id)
      //   console.log(this.shopGoodsList)
      // }
      // this.shopGoodsList = { ...this.shopGoodsList }
    },

    async handleData() {
      this.isLoading++

      // 门店
      // {1: [], 2: []}
      const { shop_id } = this.$route.query
      const shopList = await getShopList({ id: shop_id })
      if (shopList.length !== 1) {
        this.$message.error('获取门店失败')
        return
      }
      this.shopGoodsList = shopList[0].goods_list || []

      // 分类
      let cateList = await getGoodsCategoryList()
      cateList = cateList.filter(item => item.status !== -1)

      // 商品
      let goodsList = await getGoodsList()
      goodsList = goodsList.filter(item => item.status !== -1)

      // 分类和商品融合
      this.cateList = cateList.map(cate => {
        cate.goodsList = goodsList.filter(goods => goods.cate_id === cate.id)
        return cate
      })
      this.isLoading--
    }

  }
}
</script>

<style lang="scss" scoped>
.goods_box {
  display: flex;
  flex-wrap: wrap;
  .goods_item {
    width: 100px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .goods_img {
      height: 70px;
    }
  }
}

.submit-btn {
  position: fixed;
  bottom: 0;
  width: 400px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
